<template>
    <pull-to
        :bottom-load-method="infiniteHandler"
        :bottom-config="BOTTOM_DEFAULT_CONFIG"  style="height: 100vh;background:#f5f5f5">
        <ul v-if="data.all_count!=0">
            <li v-for="(item,index) in list" :key="index">
                <div style="display:inline-block">
                    <p><span>{{item.title}}</span></p>
                    <p style="font-size: 12px">{{item.order_time}}</p>
                </div>
                
                <span style="float:right;margin-top:35px;font-size:16px">{{item.money}}</span>
            </li>
        </ul>
        <div v-else class="empty">
            <img src="@/assets/img/empty.png" alt="">
            <p>还没产生记录哦~</p>
        </div>
            
    </pull-to>
</template>

<script>
    import request from "@/request/index.js"
    import PullTo from 'vue-pull-to';

    export default {
        name: "accountDetail",
        components:{
            PullTo,
        },
        data(){
            return{
                page:1,
                list:[],
                data:{},
                allPage:1,
                BOTTOM_DEFAULT_CONFIG: {
                    pullText: "上滑继续加载",
                    triggerText: "释放更新",
                    loadingText: "加载中,请稍后",
                    doneText: "内容已全部展示了",
                    failText: "加载失败",
                    loadedStayTime: 1000,
                    stayDistance: 50,
                    triggerDistance: 50,
                },
            }
        },
        watch:{
            
        },
        methods:{
            infiniteHandler:function(loaded){
                this.page++;
                // request.fundRecord(this);
                if(this.page<this.allPage){
                    this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                    loaded("done");
                    request.fundRecord(this);
                }else{
                    this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                    loaded("done");
                    this.loaded = true;
                }
            },
        },
        created(){

        },
        mounted(){
            request.fundRecord(this);
        }
    }
</script>

<style scoped lang="scss">
  ul{
      li{
          padding: 0 4vw;
          margin-top: 15px;
          background: #ffffff;
          p{
              font-size: 15px;
              color: #333333;
              line-height: 50px;

              span:last-child{
                  float:right;
                  font-size: 14px;
              }
          }
      }

  }
    .empty{
        text-align: center;
        padding-top: 180px;
        color: #333333;
        img{
            width: 114px;
            margin-bottom: 10px;
        }
    }
</style>
